<template>
     <div class="circleList flex van-hairline--bottom">
            <div class="left" @click="toUserDetail(data.uid)">
                <van-image
                width="1.5rem"
                height="1.5rem"
                fit="cover"
                radius=".2rem"
                :src="data.avatar"
            />
            </div>
            <div class="right">
                <div class="name" @click="toUserDetail(data.uid)">{{data.name}}</div>
                <div class="content">
                   {{data.content}}
                </div>
                <div class="imgList">
                <div class="one" v-if="data.pictures.length==1" @click="showImg(0)">
                    <van-image
                width="8rem"
                fit="contain"
                :src="data.pictures[0]"
                />
                </div>
                <div class="more flex" v-else>
                        <van-image
                        width="33%"
                        height="auto"
                        fit="cover"
                        class="img-wrapper"
                        :src="item"
                         v-for="(item,index) in data.pictures" :key="index"
                         @click="showImg(index)"
                        />
                </div>
                </div>
                <div class="bottom flex">
                    <div class="time">
                        <span>{{showTime}}</span>
                        <span class="time-delete" v-if="data.uid == id" @click="deleteCircle(data.uid)">删除</span>
                    </div>
                    <div class="Menu-wrapper" @click="showMenu">
                        <span>..</span>
                             <div class="menu-box flex" v-show="menuStatus" :class="menuStatus?'openMenu':''">
                            <div class="menu-left" @click="menuLeft">
                                <van-icon name="like-o" />
                               <span>赞</span>
                            </div>
                            <div class="menu-right" @click="menuRight">
                                <van-icon name="comment-o" />
                                <span>评论</span>
                            </div>
                        </div>
                        </div>
                </div>
                <div class="commentBox">
                    <div class="point flex van-hairline--bottom" v-if="data.like.length!==0">
                        <van-icon name="like-o" style="marginTop:.15rem;marginRight:.2rem;" />
                        <div class="pointList" v-for="(item,index) in data.like" :key=index>
                            <span @click="toUserDetail(item.l_id)">{{item.l_name}}</span>
                            <span v-if="index !== data.like.length-1">,&nbsp;</span>
                            </div>
                    </div>
                    <div class="comment" v-if="data.comment.length!==0">
                       <div v-for="(item,index) in data.comment" :key="index">
                            <div class="commentText">
                            <span class="commentName" @click="toUserDetail(item.sendId)">{{item.sendName}}</span>
                            <span v-if="item.acceptId!==''&&item.acceptName!==''">回复</span>
                            <span class="commentName" v-if="item.acceptId!==''&&item.acceptName!==''" @click="toUserDetail(item.acceptId)">{{item.acceptName}}</span>
                            <span class="commentText" @click="sendToSb(item,index)">:&nbsp;{{item.content}}</span>
                            </div>
                       </div>
                    </div>
                    <van-dialog v-model="show" title="输入要评论的内容" show-cancel-button confirmButtonText='发送' confirmButtonColor='#66BC64' @confirm="submitComment">
                   <van-field
                    v-model="message"
                    rows="1"
                    autosize
                    label=""
                    type="textarea"
                    :placeholder="placeholder"
                    maxlength=200
                    class="inputBox"
                    />
                    </van-dialog>
                </div>
            </div>
        </div>
</template>
<script>
import { ImagePreview } from 'vant';
import time from '../../../api/libs/time';
import {Meteor} from 'meteor/meteor';
import { image, user, friends, circleInf } from '../../../api/collections/index';
export default {
    props:{
        data:Object
    },
     meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        const id = sessionStorage.getItem('user')
        const getUser = user.findOne({_id:id})                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
        return  getUser
    },
     },
    computed:{
      showTime(){
        return time.before_time(this.data.create_time)
      }
    },
    data(){
           return{ 
            menuStatus:false,
            show:false,
            message:'',
            placeholder:'评论',
            sendInf:{id:'',name:''},
            id:sessionStorage.getItem('user')
           }
        },
    methods:{
        showMenu(){
           this.menuStatus = !this.menuStatus
           this.$emit('menuStatus',this.menuStatus)
       },
       menuLeft(){
          const like = this.data.like
          const id = sessionStorage.getItem('user')
          if(like.length!==0){
             if(like.some(e=>{return e.l_id == id})){
                 like.forEach((item,index)=>{
                     if(item.l_id==id){
                          like.splice(index,1)
                     }
                 })
            Meteor.call('circleInf.updateByLike',{
                id:this.data._id,
                likeList:like
            })
             }
             else{
                 like.push({
                     l_id:id,
                    l_name:this.userInf.nickname
                 })
                Meteor.call('circleInf.updateByLike',{
                id:this.data._id,
                likeList:like
            }) 
             }
          }
          else{
             like.push({
                     l_id:id,
                    l_name:this.userInf.nickname
                 })
                Meteor.call('circleInf.updateByLike',{
                id:this.data._id,
                likeList:like
            })   
          }
       },
       menuRight(){
           this.show = !this.show
           this.message = ''
       },
       submitComment(){
           const id = sessionStorage.getItem('user')
           let comments = this.data.comment
            comments.push({
                content:this.message,
                sendId:id,
                sendName:this.userInf.nickname,
                acceptId:this.sendInf.id,
                acceptName:this.sendInf.name
            })
            Meteor.call('circleInf.updateByComment',{
                id:this.data._id,
                comment:comments
            })
       },
       sendToSb(e,i){
           this.message = ''
           if(e.sendId == sessionStorage.getItem('user')){
               this.$dialog.confirm({
                title: '删除评论',
                message: '确定要删除该评论吗?',
                })
                .then(() => {
                let comments = this.data.comment
                comments.splice(i,1)
                Meteor.call('circleInf.updateByComment',{
                id:this.data._id,
                comment:comments
            })
                })
                .catch(()=>{})
            }    
           else{
            this.placeholder = '回复'+e.sendName+':'
           this.sendInf.id = e.sendId
           this.sendInf.name = e.sendName
           this.show = !this.show
           }
       },
       toUserDetail(id){
           this.$router.push('/userBase/'+id)
       },
       showImg(index){
            ImagePreview({
                images: [
                    ...this.data.pictures
                ],
                showIndex:true,
                loop:false,
                startPosition:index
                });
           },
           deleteCircle(id){
               this.$dialog.confirm({
                message: '确定要删除该朋友圈吗?',
                })
                .then(() => {
                    Meteor.call('circleInf.deleteCircle',this.data._id,(err,res)=>{
                        if(err){
                            this.$toast(err.error)
                        }else{
                            Meteor.call('circleStatus.deleteById',{
                                uid:this.id,
                                cid:this.data._id
                            })
                        }
                    })
                })
                .catch(() => {
                    // on cancel
                });
           }
            
        }
}
</script>
<style scoped>
       .circleList{
        padding: .5rem;
    }
    .left{
        margin-right: .5rem;
    }
    .right{
        flex: 1;
        padding-right: .3rem;
    }
    .name{
        font-size: .6rem;
        font-weight: 700;
        color: #5E718B;
    }
    .content{
        font-size: .6rem;
        padding: .2rem 0 .4rem;
    }
     .bottom{
        justify-content: space-between;
        width: 100%;
        margin-top: .4rem;
    }
    .time{
        color: #797979;
        font-size: .5rem;
    }
   
    .Menu-wrapper{
        position: relative;
        background-color: #FAF6FB;
        color: #626D8F;
        line-height: 0;
        height: .5rem;
        border-radius: .1rem;
        font-weight: 700;
        padding: .1rem .2rem;
    }
    .openMenu{
         animation: open .4s linear;
    }
    .menu-box{
        position: absolute;
        left: -6.5rem;
        top: -.4rem;
        width: 6rem;
        background-color: #4D4C4A;
        color: #fff;
        font-size: .6rem;
        padding: .4rem 0;
        box-sizing: border-box;
        border-radius: .1rem;
        font-weight: normal;
        text-align: center;
    }
    .menu-left{
        width: 50%;
    }
    .menu-right{
        flex: 1;
    }
    .Menu-wrapper:active{
        background-color: #cccccc;
    }
    .imgList{
        width: 100%;
    }
    .more{
        flex-wrap: wrap;
        width: 100%;
    }
    .img-wrapper{
        padding: 0 .15rem .15rem 0;
        box-sizing: border-box;
    }
   .point{
       font-size: .6rem;
       color: #5E718B;
       padding: .2rem;
       flex-wrap: wrap;
   }
   .commentBox{
       background-color: #F7F7F7;
       border-radius: .2rem;
       margin-top: .5rem;
   }
   .comment{
       font-size: .6rem;
       padding: .2rem;
   }
   .commentName{
    color: #5E718B;
   }
   .commentText{
       color: #333;
       font-size: .5rem;
   }
   .time-delete{
       font-size: .4rem;
       color:#000099;
   }
   @keyframes open {
       0%{
           transform: translateX(100%);
       }
       50%{
           transform: translateX(50%);
       }
       100%{
           transform: translateX(0);
       }
   }
</style>